<template>
    <p>router: <a-button @click="jump">点击跳转登录页</a-button></p>
    <p>store value: {{count}}&emsp;ant-d: <a-button @click="add" type="primary">add</a-button></p>
    <p>axios http data: {{test_str || test_value}}</p>
</template>

<script lang='ts'>
import { computed, defineComponent, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { test } from '@/api/basic'
export default defineComponent({
    setup() {
        const router = useRouter()
        const store = useStore()
        let count = computed(() => store.state.count)

        const jump = (): void => {
            router.push('/login')
        }
        const add = (): void => {
            store.commit('setCount', 1)
        }
        // 测试 axios
        let test_value: object = reactive({})
        let test_str = ref('')
        const getTest = (): void => {
            test().then((res: object): void => {
                console.log(res)
                console.log(typeof(res))
                if(typeof(res) == 'string') {
                    test_str.value = res
                }
                else {
                    test_value = res
                }
                console.log(test_str)
            })
        }
        getTest()

        return {
            count,
            test_value,
            test_str,

            jump,
            add
        }
    }
})
</script>

<style lang="scss" scoped>
p {
    padding: 20px;
}
</style>